<!DOCTYPE html>
<html>
<head>
    <title>大学生信息管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
    <link rel="stylesheet" href="../header/notice.css">

    <!-- 引入 Vue.js 和 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body class="flat-blue">
    <div class="app-container" id="app">
        <div class="row content-container">

            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <header>
                            <h1>日志管理</h1>
                        </header>
                        <nav>
                            <ul>
                                <li><a href="../html/index.html">返回首页</a></li>
                            </ul>
                        </nav>
                        <main>
                            <section id="announcements">
                                <h2>日志列表</h2>
                                <table id="logTable" class="table table-dark">
                                    <thead>
                                        <tr>
                                          <th>id</th>
                                          <th>操作事件</th>
                                          <th>操作时间</th>
                                          <th>操作人</th>
                                          <th>操作ip</th>
                                          <th>删除</th>
                                        </tr>
                                      </thead>
                                      <tbody>
                                        <tr v-for="log in logs" :key="log.id">
                                          <td>{{ log.id }}</td>
                                          <td>{{ log.content }}</td>
                                          <td>{{ log.time }}</td>
                                          <td>{{ log.operator }}</td>
                                          <td>{{ log.ip }}</td>
                                          <td><button class="btn btn-danger" @click="deleteLog(log.id)">删除</button></td>
                                        </tr>
                                      </tbody>
                                </table>
                            </section>

                            <!-- 确保主内容区有足够的padding-bottom以避免内容被页脚遮挡 -->
                            <div style="padding-bottom: 0px;"></div>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
         new Vue({
            el: '#app',
            data: {
                logs: []
            },
            created() {
                this.getLogList();
            },
            methods: {
                getLogList() {
                    axios.get('/log/list').then(response => {
                        // 确保后端返回的数据格式是 { data: [logs] }
                        this.logs = response.data.data || response.data; 
                    }).catch(error => {
                        console.error('There was a problem with the fetch operation:', error);
                    });
                },
                deleteLog(id) {
                    if (id === undefined || id === null) {
                        console.error('Log ID is null or undefined');
                        return;
                    }
                    // 你的删除日志的逻辑
                    // console.log('Delete log with id:', id);
                    // 假设你有一个API调用来删除日志
                    axios.delete(`/api/logs/${id}`).then(() => {
                        this.logs = this.logs.filter(log => log.id !== id);
                    });
                }
            }
        });
    </script>
</body>
</html>